<template>
    <div class="newsinfo-container">
        <!-- <h2>1-----{{id}}</h2> -->
        <h2 class="newstitle">{{ newsinfo.title }}</h2>
        <p class="subtitle">
            <span>发表时间：{{newsinfo.add_time | dateFormat()}}</span>
            <span>点击：{{ newsinfo.click }}次</span>
        </p>
    <hr>
        <div class="conetent" v-html="newsinfo.content"></div>
        <div>
            <comment :id='this.id'></comment>
        </div>
    </div>
</template>

<script>
//导入评论子组件
import comment from '../subcomponents/comment.vue'

import { Toast } from "mint-ui";
export default{
    data(){
        return {
            id: this.$route.params.id ,//获取url中传递的id值,
            newsinfo:{}//因为获取到的result.body.message是一个数组，用对象来包裹
        }
    },
    created(){
        this.getNewsinfo();
    },
    methods:{
        getNewsinfo(){
            this.$http.get('api/getnew/'+this.id).then(result=>{
                if(result.body.status ===0){
                    this.newsinfo = result.body.message[0]
                }else{
                    Toast("加载新闻详细信息失败。。。");
                }
            })
        }
    } ,
    components:{
        comment:comment
    } 
    
};

</script>

<style lang="scss" scoped>
// 图片显示有问题的话去除scoped就可以解决
.newsinfo-container{
    padding: 0 4px;
    .newstitle{
        font-size: 16px;
        text-align: center;
        margin:15px 0;
        color: red;
    }
     .subtitle{
         font-size: 13px;
         color: blue;
         display: flex;
         justify-content: space-between;
     }
}
</style>